<template>
  <div>
    <div class="search">
      <el-row>药品名称：
        <el-input
          v-model="searchData.searchONO"
          placeholder="请输入"
          style="width:300px;margin-right:20px"
        />
        药品种类：
        <el-select
          v-model="searchData.searchSTATUS"
          style="width:300px;margin-right:90px"
          clearable
          placeholder="请选择">
          <el-option
            v-for="item in statusoptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          @click="getDeliverydata">查询</el-button>
      </el-row>
    </div>
    <el-table
      ref="singleTable"
      :data="deliveryData">
      <el-table-column
        type="index"
        width="50"
        label="序号"/>
      <el-table-column
        property="DURGID"
        label="药品编号" />
      <el-table-column
        property="DURGNAME"
        label="药品名称"/>
      <el-table-column
        property="SFXMBM"
        label="社保编号"/>
      <el-table-column
        property="DURGGG"
        label="规格"/>
      <el-table-column
        property="DURGBZDW"
        label="单位"/>
      <el-table-column
        label="单价">
        <template scope="scope">
          <el-input
            v-show="scope.row.edit"
            v-model="scope.row.DURGDJ"
            size="small"
            style="width:100px"/>
          <span v-show="!scope.row.edit">{{ scope.row.DURGDJ }}</span>
          <el-button
            :type="scope.row.edit?'success':'primary'"
            size="small"
            icon="edit"
            @click="scope.row.edit=!scope.row.edit;doUpdDrug(scope.row.edit,scope.row.DURGID,scope.row.DURGDJ)">{{ scope.row.edit?'完成':'编辑' }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        property="DURGTYPENAME"
        label="药品类型"/>

    </el-table>
    <el-pagination
      :current-page.sync="currentPage3"
      :page-size="pagesize"
      :total="total"
      layout="total,prev, pager, next"
      style="text-align:center"
      @current-change="handleCurrentChange"
    />




  </div>
</template>

<script>
import qrcode from '~/components/common/qrcode.vue'

export default {
  components: {
    qrcode
  },
  data() {
    return {
      ts: this.newStore(),
      ydmc: sessionStorage.getItem('ydmc'),
      username: sessionStorage.getItem('username'),
      currentPage3: 1,
      pagesize: 10,
      total: 0,
      dayin: false,
      fahuo: false,
      mailList: [],
      deliveryData: [],
      choosedData: {},
      searchData: {
        searchSTATUS: '',
        searchSHR: '',
        searchONO: '',
        searchTEL: ''
      },
      mailType: '',
      mailNum: '',
      statusoptions: [
        {
          name: '中药',
          value: '1'
        },
        {
          name: '西药',
          value: '2'
        }
      ],
      qrcodeurlsh: '',
      qrcodeurlxq: '',
      sum1: 0,
      order: {},
      drugLists: [],
      fujia_list: [],
      fujia_options: [
        { label: '代煎费(10元／每剂)', value: 10, disabled: true },
        { label: '快递费(12元／每次)', value: 12, disabled: true }
      ],
      isshow: false,
      showtitle: ''
    }
  },

  computed: {
    currentDate() {
      const date = new Date()
      let str = ''
      const Year = date.getUTCFullYear()
      const Month =
        date.getMonth() <= 9 ? `0${date.getMonth() + 1}` : date.getMonth()
      const RQ = date.getDate() <= 9 ? `0${date.getDate()}` : date.getDate()
      const Hour =
        date.getHours() <= 9 ? `0${date.getHours()}` : date.getHours()
      const Minute =
        date.getMinutes() <= 9 ? `0${date.getMinutes()}` : date.getMinutes()
      const Second =
        date.getSeconds() <= 9 ? `0${date.getSeconds()}` : date.getSeconds()
      str = `${Year}-${Month}-${RQ} ${Hour}:${Minute}:${Second}`
      return str
    }
  },
  created() {
    this.getDeliverydata()
  },
  methods: {
    getQrCode(oid) {
      console.log(oid)
      // alert(`调用获取二维码接口： ${oid}`);
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.18',
          CLIENTID: 'YLAPP',
          // "RYBID": "DOCTOR",
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            oid
          }
        }
      })
      console.log(req)
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req
      }).then(ts => {
        if (ts.d.RESULT == '200') {
          this.qrcodeurlsh = ts.d.DATAOBJ.DATA.qrcodeurlsh // 收货二维码路径
          this.qrcodeurlxq = ts.d.DATAOBJ.DATA.qrcodeurlxq // 查看详情二维码路径
        } else {
          this.$message.error(
            `获取收货二维码、查看详情二维码失败 : ${ts.d.RESULTTEXT}`
          )
        }
      })
    },
    getDeliverydata() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.17',
          CLIENTID: 'YLAPP',
          // "RYBID": "DOCTOR",
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            searchONO: this.searchData.searchONO,
            searchSTATUS: this.searchData.searchSTATUS,
            rowsperpage: this.pagesize + '',
            page: this.currentPage3 + ''
          }
        }
      })
      console.log(req)
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req
      }).then(ts => {
        this.deliveryData = ts.d.DATAOBJ.DATA
        this.total = Number(ts.d.DATAOBJ.TOTAL)
      })
    },
    handleCurrentChange(val) {
      this.getDeliverydata()
    },

    showPrint(item, isshow, showtitle) {
      //this.getQrCode(item)
      this.sum1 = 0
      this.order = item
      this.drugLists = item.DURGSLIST.split(',')
      this.drugLists.forEach(el => {
        this.sum1 += Number(el.split('#')[3])
      })
      this.fujia_list = JSON.parse(item.ACSM)

      this.dayin = true
      this.isshow = isshow
      this.showtitle = showtitle
    },
    doUpdDrug(ifdo, ono, price) {
      if (!ifdo) {
        const req = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.04.20',
            CLIENTID: 'YLAPP',
            RYBID: 'YF',
            DATA: {
              drugid: ono,
              price: price
            }
          }
        })
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': req
        }).then(ts => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.search {
  margin-bottom: 10px;
  width: 100%;
}

.detail-container {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;

  ul {
    list-style: none;
    padding-left: 10px;
    margin-bottom: 0;
  }

  .detail-text-container {
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -188px;
    width: 570px;
    min-height: 500px;
    background-color: #fff;

    .detail-main {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      &::-moz-scrollbar {
        display: none;
      }

      #detail-content {
        .content {
          font-size: 14px;

          .item {
            padding: 0 10px;
            border-bottom: 1px solid #ccc;

            &:nth-last-child(1) {
              border-bottom: none;
              margin-bottom: 5px;
            }

            .item-title {
              line-height: 24px;
              color: #25a4bb;
            }

            .info {
              display: flex;

              .item-info {
                flex: 1;

                &:nth-of-type(1) {
                  flex: 0 0 30px;
                  color: #25a4bb;
                }

                &:nth-of-type(3) {
                  flex: 0 0 80px;
                }

                p {
                  margin: 0;
                  line-height: 20px;

                  span {
                    font-weight: 500;
                  }
                }
              }
            }

            &.message {
              span {
                text-indent: 1.5em;
              }
            }

            &.drug-info {
              position: relative;

              .table {
                td {
                  padding: 0 0 0 10px;
                  border-top: none;

                  &:nth-of-type(1) {
                    width: 80px;
                  }
                }
              }

              .drug-list {
                ul {
                  overflow: auto;

                  li {
                    width: 45%;
                    float: left;
                  }
                }

                .icon-R {
                  color: #25a4bb;
                }
              }

              .drug-usage, .drug-service, .drug-cost, .drug-order {
                .drug-title {
                  color: #25a4bb;
                }

                p {
                  margin: 0;
                }
              }

              .drug-usage {
                .text {
                  margin-right: 20px;
                  text-indent: 1em;
                }
              }

              .drug-cost {
                .table {
                  margin: 0;

                  td {
                    padding: 0 0 0 10px;
                    border-top: none;

                    &:nth-of-type(1) {
                      width: 80px;
                    }
                  }
                }
              }

              .drug-order {
                .table {
                  margin: 0;

                  tr {
                    td {
                      padding: 0 0 0 10px;
                      border-top: none;

                      &:nth-of-type(1) {
                        width: 100px;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .print-info {
          font-size: 14px;
          position: absolute;
          bottom: -50px;
          left: 20px;
        }

        p {
          margin: 0;
        }

        .barcode-wrapper {
          margin-left: -10px;
        }
      }

      .invoice {
        .content {
          .table {
            tr {
              td {
                &:nth-of-type(2) {
                  font-size: 14px;
                }

                input {
                  border: 0 none;
                  outline: 0 none;
                  border: 1px solid #ccc;
                  padding: 3px 0 3px 5px;
                  width: 200px;
                }

                .info {
                  padding-left: 10px;
                  font-size: 12px;

                  .iconfont {
                    margin-right: 5px;
                    font-size: 16px;

                    &.icon-tishishuoming {
                      font-size: 14px;
                    }
                  }

                  &.fail {
                    color: #e4393c;
                  }

                  &.pass {
                    color: #0c0;
                  }
                }

                .send {
                  width: 200px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  background: #25a4bb;
                  color: #fff;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }

    .detail-tab {
      position: absolute;
      bottom: -50px;
      display: flex;
      width: 570px;
      height: 50px;
      line-height: 50px;

      .item {
        flex: 1;
        text-align: center;
        background: #ccc;
        color: #333;
        cursor: pointer;

        &:nth-of-type(1) {
          border-right: 1px solid #fff;
        }

        &.active {
          background: #25a4bb;
          color: #fff;
        }
      }
    }
  }
}
</style>
